<template>
  <div>
    <h2 class="detail-title">试卷基本信息</h2>
    <div class="detail-info">
      <div class="detail-item">试卷ID：{{data.id}}</div>
      <div class="detail-item">试卷名称：{{data.paper_name}}</div>
      <div class="detail-item">所属课程：{{data.course_name}}</div>
      <div class="detail-item">考试时间：{{data.start_time}}</div>
      <div class="detail-item">题量：{{data.question_total}}</div>
      <div class="detail-item">学号：{{data.studentid}}</div>
      <div class="detail-item">用户姓名：{{data.username}}</div>
      <div class="detail-item">成绩：{{data.score}}</div>
    </div>

   <div class="exam">
      <div class="exam-con">
        <h3>试卷内容</h3>
        <h4 v-if="data.mc.length > 0">一、单选题（共{{data.mc.length}}题，总共{{data.mc.length * data.mc[0].value}}分）</h4>
        <div class="choice-ans">
          <div class="choice-stu-ans">
            <div>
              考生答案：<span v-for="(ans, i) in data.mc" :key="'mc-an' + i">{{ans.student_item}}、</span>
              <span>得分：{{mc_score}}</span>
            </div>
            <div>
              标准答案：<span v-for="(ans, i) in data.mc" :key="'mc-san' + i">{{ans.standard_item}}、</span>
            </div>
          </div>
        </div>
        <div class="common-ques" v-for="(item, i) in data.mc" :key="item.question_id + String(i)" >
          <div class="ques">
            <div class="ques-con">
              <span>{{i+1}}、</span>
              <span>{{item.describe}}</span>
            </div>
            <div class="ques-score">
              <span>分值：</span>
              <el-input readonly v-model="item.value" class="ques-score-value"></el-input>
            </div>
          </div>
          <div class="ques-anser">
            <div v-for="(choice, index_choice) in item.options" :key="'choice2' + index_choice" class="mc-radio">
              <span>
                {{String.fromCharCode(65 + index_choice)}}、{{choice.content}}
              </span>
            </div>
          </div>
        </div>
        <h4 v-if="data.ma.length > 0">二、多选题（共{{data.ma.length}}题，总共{{data.ma.length * data.ma[0].value}}分）</h4>
        <div class="choice-ans">
          <div class="choice-stu-ans">
            <div>
              考生答案：<span v-for="(ans, i) in data.ma" :key="'ma-an' + i">{{ans.student_item.join('')}}、</span>
              <span>得分：{{ma_score}}</span>
            </div>
            <div>
              标准答案：<span v-for="(ans, i) in data.ma" :key="'ma-san' + i">{{ans.standard_item.join('')}}、</span>
            </div>
          </div>
        </div>
        <div class="common-ques" v-for="(item, i) in data.ma" :key="item.question_id" >
          <div class="ques">
            <div class="ques-con">
              <span>{{i+1}}、</span>
              <span>{{item.describe}}</span>
            </div>
            <div class="ques-score">
              <span>分值：</span>
              <el-input readonly v-model="item.value" class="ques-score-value"></el-input>
            </div>
          </div>
          <div class="ques-anser">
            <div v-for="(choice, index_choice) in item.options" :key="'choice3' + index_choice" class="mc-radio">
              <span>
                {{String.fromCharCode(65 + index_choice)}}、{{choice.content}}
              </span>
            </div>
          </div>
        </div>
        <h4 v-if="data.tf.length > 0">三、判断题（共{{data.tf.length}}题，总共{{data.tf.length * data.tf[0].value}}分）</h4>
        <div class="choice-ans">
          <div class="choice-stu-ans">
            <div>
              考生答案：<span v-for="(ans, i) in data.tf" :key="'tf-an' + i">{{ans.student_item}}、</span>
              <span>得分：{{tf_score}}</span>
            </div>
            <div>
              标准答案：<span v-for="(ans, i) in data.tf" :key="'tf-san' + i">{{ans.standard_item}}、</span>
            </div>
          </div>
        </div>
        <div class="common-ques" v-for="(item, i2) in data.tf" :key="item.question_id" >
          <div class="ques">
            <div class="ques-con">
              <span>{{i2+1}}、</span>
              <span>{{item.describe}}</span>
            </div>
            <div class="ques-score">
              <span>分值：</span>
              <el-input readonly v-model="item.value" class="ques-score-value"></el-input>
            </div>
          </div>
          <div class="ques-anser">
            <div class="ques-anser">
              <div v-for="(choice, index_choice) in item.options" :key="'choice1' + index_choice" class="mc-radio">
                <span>
                  {{String.fromCharCode(65 + index_choice)}}、{{choice.content}}
                </span>
              </div>
            </div>
          </div>
        </div>
        <h4 v-if="data.bl.length > 0">四、填空题（共{{data.bl.length}}题，总共{{data.bl.length * data.bl[0].value}}分）</h4>
        <div class="common-ques" v-for="(item, i3) in data.bl" :key="item.question_id" >
          <div class="ques">
            <div class="ques-con">
              <span>{{i3+1}}、</span>
              <span>{{item.describe}}</span>
            </div>
            <div class="ques-score">
              <span>分值：</span>
              <el-input readonly v-model="item.value" class="ques-score-value"></el-input>
            </div>
          </div>
          <div class="ques-anser">
            <div class="str-ans">
              <span>考生答案：{{item.standard_answer}}</span>
              <span>
                <el-input type="number" class="correct-score" @change="onCorrectScore(item)" v-model="item.correctscore"></el-input>
                <el-button @click="onCorrectScore(item)"  type="primary">打分</el-button>
              </span>
            </div>
            <div class="str-ans">考生答案：{{item.student_answer}}</div>
          </div>
        </div>
        <h4 v-if="data.sa.length > 0">五、简答题（共{{data.sa.length}}题，总共{{data.sa.length * data.bl[0].value}}分）</h4>
        <div class="common-ques" v-for="(item, i4) in data.sa" :key="item.question_id" >
          <div class="ques">
            <div class="ques-con">
              <span>{{i4+1}}、</span>
              <span>{{item.describe}}</span>
            </div>
            <div class="ques-score">
              <span>分值：</span>
              <el-input readonly v-model="item.value" class="ques-score-value"></el-input>
            </div>
          </div>
          <div class="ques-anser">
            <div class="str-ans">
              <span>考生答案：{{item.standard_answer}}</span>
              <span>
                <el-input type="number" class="correct-score" v-model="item.correctscore"></el-input>
                <el-button @click="onCorrectScore(item)"  type="primary">打分</el-button>
              </span>
            </div>
            <div class="str-ans">考生答案：{{item.student_answer}}</div>
          </div>
        </div>
      </div>
    </div>
    <el-button class="go-back-btn" @click="goBack" type="primary">返回</el-button>
  </div>
</template>
<script>
import goBack from "@/mixins/goBack";
import {paperModel} from '@/api/models'
import { Message } from 'element-ui';
export default {
  mixins: [goBack],
  components: {},
  data() {
    return {
      data: {
        ma: [],
        mc: [],
        tf: [],
        bl: [],
        sa: []
      },
      mc_score: 0,
      ma_score: 0,
      tf_score: 0
    };
  },
  mounted() {
    this.id = this.$route.params.id
    this.getItem()
  },
  methods: {
    onCorrectScore(item) {
      if (item.value < item.correctscore) {
        return Message.warning('该题打分不得超过' + item.value)
      }
      paperModel.questionScore(item, res => {
        Message.success(res.message)
      })
      console.log(item)
    },
    getItem() {
      paperModel.item(this.id, res => {
        let data = res.data
        let mc_score = 0
        let ma_score = 0
        let tf_score = 0
        data.mc = data.mc.map(b => {
          b.options = b.options.map((bo, boi) => {
            bo.item = String.fromCharCode(65 + boi)
            if(b.standard_answer.includes(bo.id)) {
              b.standard_item = bo.item
            }
            if(b.student_answer.includes(bo.id)) {
              b.student_item = bo.item
            }
            return bo
          })
          mc_score += parseInt(b.correctscore)
          return b
        })
        data.ma = data.ma.map(b => {
          b.standard_item = []
          b.student_item = []
          b.options = b.options.map((bo, boi) => {
            bo.item = String.fromCharCode(65 + boi)
            if(b.standard_answer.includes(bo.id)) {
              b.standard_item.push(bo.item)
            }
            if(b.student_answer.includes(bo.id)) {
              b.student_item.push(bo.item)
            }
            return bo
          })
          ma_score += parseInt(b.correctscore)
          return b
        })
        data.tf = data.tf.map(b => {
          b.standard_item = []
          b.student_item = []
          b.options = b.options.map((bo, boi) => {
            bo.item = String.fromCharCode(65 + boi)
            if(b.standard_answer.includes(bo.id)) {
              b.standard_item.push(bo.item)
            }
            if(b.student_answer.includes(bo.id)) {
              b.student_item.push(bo.item)
            }
            return bo
          })
          tf_score += parseInt(b.correctscore)
          return b
        })
        this.data = data
        this.mc_score = mc_score
        this.ma_score = ma_score
        this.tf_score = tf_score
      })
    }
  }
};
</script>
<style lang="scss">
  .exam{
    min-height: 50px;
    display: flex;
  }
  .exam-con{
    border: 1px solid #cccccc;
    padding: 20px 15px;
    width: 60%;
    text-align: left;
  }
  .exam-con h3{
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  .ans-card{
    width: 30%;
    border: 1px solid #cccccc;
    margin-left: 5%;
  }
  .exam-con h4{
    margin-top: 20px;
  }
  .common-ques{
    margin-top: 15px;
  }
  .ques{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .ques .ques-con{
    display: flex;
    align-items: center;
    width: 65%;
  }
  .ques-con span:first-child{
    font-weight: bold;
  }
  .ques-score{
    display: flex;
    align-items: center;
    width: 30%;
  }
  .ques-score .ques-score-value{
    width: 50px !important;
  }
  .mc-radio{
    margin-left: 20px;
    margin-top: 10px;
  }
  .ques-anser{
    width: 80%;
    margin-left: 20px;
  }
  .ques-anser .el-textarea{
    margin-top: 10px;
  }
  .ques-anser .str-ans{
    border: 1px solid #cccccc;
    padding: 10px;
    margin-top: 10px;
  }
  .choice-ans{
    border: 1px solid #cccccc;
    padding: 10px;
  }
  .str-ans {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .correct-score{
    width: 100px !important;
    margin-right: 15px;
  }
</style>